<template>
  <div id="container" ref="container">
    <el-card shadow="never" class="mb20">
      <el-form :model="form" ref="form" :inline="true" label-width="80px">
        <el-form-item class="mb0" label="查询月份" prop="month">
          <el-date-picker
            v-model="form.month"
            value-format="yyyy-MM"
            type="month"
            placeholder="选择月"
            :picker-options="pickerOptions"
          />
        </el-form-item>
        <el-form-item class="mb0">
          <el-tooltip class="item" effect="dark" content="查询" placement="top">
            <el-button icon="el-icon-search" type="primary" @click="handleSearch" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="重置" placement="top">
            <el-button icon="el-icon-refresh-right" @click="handleReset" />
          </el-tooltip>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never" class="mb20">
      <div>
        <p class="mb10">
          总收入：
          <span
            class="blue-color"
          >{{ `${incomeRatioData.totalInc && incomeRatioData.totalInc}万` }}</span>
        </p>
        <div class="flex-wrap">
          <div class="men-zhen mb20" :style="{ width: `${incomeRatioData.mincForShowzb}%` }">
            <p class="mt32">
              门诊：
              <span class="blue-color">{{ incomeRatioData.clinicInc }}万</span>
              <span class="blue-color">({{`${incomeRatioData.mincForShowzb}%`}})</span>
            </p>
          </div>
          <div class="zhu-yuan tl-right mb20" :style="{width: `${incomeRatioData.zysrzb}%` }">
            <p class="mt32">
              住院：
              <span class="blue-color">{{ `${incomeRatioData.innerInc}万` }}</span>
              <span class="blue-color">({{`${incomeRatioData.zysrzb}%`}})</span>
            </p>
          </div>
        </div>
      </div>
    </el-card>

    <el-row :gutter="16" class="mb20">
      <el-col :span="8">
        <el-card shadow="never">
          <div slot="header" class="tl-center">收入结构统计图</div>
          <div id="bar" :style="{width: '100%', height: '400px'}"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never">
          <div slot="header" class="tl-center">绩效发放情况</div>
          <div id="bar1" :style="{width: '100%', height: '400px'}"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never">
          <el-tabs v-model="activeName" @tab-click="handleTabClick">
            <el-tab-pane label="门诊" name="first">
              <div id="pie1" :style="{width: '100%', height: '400px'}"></div>
            </el-tab-pane>
            <el-tab-pane label="住院" name="second">
              <div id="pie2" :style="{width: '100%', height: '400px'}"></div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
    <el-card shadow="never" class="mb20">
      <div slot="header">全院指标分析</div>
      <el-row :gutter="16" class="flex" style="overflow-x: scroll">
        <el-col
          class="mb20"
          style="min-width: 200px"
          :span="4"
          v-for="(item,index) in analyseData"
          :key="index"
        >
          <el-card>
            <div slot="header" class="tl-center">{{ item.indexName }}</div>
            <p>
              本期值：
              <span>{{ item.value }}</span>
            </p>
            <p>
              同期值：
              <span>{{ item.tqValue }}</span>
            </p>
            <p>
              增长率：
              <span
                :class="[ item.growthRate <= 0 ? 'red' : 'green' ]"
              >{{ `${item.growthRate}%` }}</span>
            </p>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <div class="mb20">
        <span class="mr20">各科室指标分析</span>
        <el-select clearable @change="handleSelectChange" v-model="name">
          <el-option
            v-for="(item,index) in selectData"
            :key="index"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
      </div>

      <analyse-table :columns="columns" ref="analyseTable" />
    </el-card>
  </div>
</template>

<script>
import { reportDataByMonth } from '@/api/reports'
import AnalyseTable from './AnalyseTable'

export default {
  components: {
    AnalyseTable
  },
  data() {
    return {
      name: 1,
      activeName: 'first',
      analyseData: [],
      form: {},
      polar1: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          bottom: '10px',
          data: ['门诊', '住院']
        },
        grid: {
          top: '5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['药费', '医技检查费', '治疗费', '手术费', '材料费', '床位费', '其他']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '门诊',
            type: 'bar',
            stack: '广告',
            data: []
          },
          {
            name: '住院',
            type: 'bar',
            stack: '广告',
            data: []
          }
        ]
      },
      polar2: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          bottom: '10px',
          data: ['总收入', '绩效']
        },
        grid: {
          top: '5%'
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: ['本期绩效', '同期绩效']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '总收入',
            type: 'bar',
            barGap: 0,
            data: []
          },
          {
            name: '绩效',
            type: 'bar',
            data: []
          }
        ]
      },
      polar3: {
        title: {
          text: '门诊费用收入明细',
          //   subtext: '纯属虚构',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: '10px',
          data: ['药费', '医技检查费', '治疗费', '手术费', '材料费', '床位费', '其他']
        },
        series: [
          {
            name: '门诊费用明细',
            type: 'pie',
            radius: '55%',
            label: false,
            center: ['50%', '50%'],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      polar4: {
        title: {
          text: '住院收入费用明细',
          //   subtext: '纯属虚构',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: '10px',
          data: ['药费', '医技检查费', '治疗费', '手术费', '材料费', '床位费', '其他']
        },
        series: [
          {
            name: '住院收入费用明细',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            label: false,
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      incomeRatioData: {}, // 总收入等数据
      myChart3: null,
      selectData: [
        {
          label: '科室收入',
          value: 1
        },
        {
          label: '人均费用',
          value: 2
        },
        {
          label: '单床产值',
          value: 3
        },
        {
          label: '人均治疗收入',
          value: 4
        },
        {
          label: '医技收入占比',
          value: 5
        },
        {
          label: '药占比',
          value: 6
        },
        {
          label: '耗占比',
          value: 7
        },
        {
          label: '出院人次',
          value: 8
        },
        {
          label: '住院天数',
          value: 9
        },
        {
          label: '平均住院日',
          value: 10
        },
        {
          label: '病床数',
          value: 11
        },
        {
          label: '病床周转次数',
          value: 12
        },
        {
          label: '病床使用率',
          value: 13
        },
        {
          label: '手术人次',
          value: 14
        }
      ],
      columns: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e7
        }
      }
    }
  },
  created() {
    let scroll = this.$route.params.scroll
    const myDate = new Date()
    const nowYear = myDate.getFullYear()
    const preMonth = this.buLing(myDate.getMonth())
    this.$set(this.form, 'month', nowYear + '-' + preMonth)
    // this.form.month = nowYear + '-' + preMonth
    this.getReportData({ month: nowYear + '-' + preMonth })
    this.$nextTick(() => {
      this.$refs.analyseTable.handleGetList({ month: this.form.month })
      this.handleSelectChange(1)
      if (scroll) {
        document.body.scrollTop = 1400
      }
    })
  },
  methods: {
    buLing(num) {
      return num < 10 ? `0${num}` : num
    },
    handleSelectChange(e) {
      console.log('e', e)
      let arr = [
        {
          label: '科室名称',
          prop: 'hmrp_dept_name'
        }
      ]
      switch (e) {
        case 1:
          arr.push(
            {
              label: '科室收入(本期)',
              prop: 'inc_for_show'
            },
            {
              label: '科室收入(同期)',
              prop: 'inc_for_show_yoy'
            },
            { slot: 'incForShowIr' },
            // {
            //   label: '科室收入增长率',
            //   prop: 'inc_for_show_ir'
            // },
            {
              label: '科室收入指标值',
              prop: 'inc_target'
            },
            {
              label: '科室收入完成率',
              prop: 'inc_for_show_ar'
            }
          )
          break
        case 2:
          arr.push(
            {
              label: '人均费用(本期)',
              prop: 'per_avg_cost'
            },
            {
              label: '人均费用(同期)',
              prop: 'per_avg_cost_yoy'
            },
            { slot: 'perAvgCostIr' }
          )
          break
        case 3:
          arr.push(
            {
              label: '单床产值(本期)',
              prop: 'single_bed_value'
            },
            {
              label: '单床产值(同期)',
              prop: 'single_bed_value_yoy'
            },
            { slot: 'singleBedValueIr' }
          )
          break
        case 4:
          arr.push(
            {
              label: '人均治疗收入(本期)',
              prop: 'per_treat_inc'
            },
            {
              label: '人均治疗收入(同期)',
              prop: 'per_treat_inc_yoy'
            },
            { slot: 'perTreatIncIr' }
            // {
            //   label: '人均治疗收入增长率',
            //   prop: 'per_treat_inc_ir'
            // }
          )
          break
        case 5:
          arr.push(
            {
              label: '医技收入占比(本期)',
              prop: 'tech_inc_pct'
            },
            {
              label: '医技收入占比(同期)',
              prop: 'tech_inc_pct_yoy'
            },
            { slot: 'techIncPctIr' }
            // {
            //   label: '医技收入占比增长率',
            //   prop: 'tech_inc_pct_ir'
            // }
          )
          break
        case 6:
          arr.push(
            {
              label: '药品收入占比(本期)',
              prop: 'drug_pct'
            },
            {
              label: '药品收入占比(同期)',
              prop: 'drug_pct_yoy'
            },
            { slot: 'drugPctIr' }
            // {
            //   label: '药品收入占比增长率',
            //   prop: 'drug_pct_ir'
            // }
          )
          break
        case 7:
          arr.push(
            {
              label: '耗占比(本期)',
              prop: 'consump_pct'
            },
            {
              label: '耗占比(同期)',
              prop: 'consump_pct_yoy'
            },
            { slot: 'consumpPctIr' }
            // {
            //   label: '耗占比增长率',
            //   prop: 'consump_pct_ir'
            // }
          )
          break
        case 8:
          arr.push(
            {
              label: '出院人次(本期)',
              prop: 'out_person_num'
            },
            {
              label: '出院人次(同期)',
              prop: 'out_person_num_yoy'
            },
            { slot: 'outPersonNumIr' }
            // {
            //   label: '出院人次增长率',
            //   prop: 'out_person_num_ir'
            // }
          )
          break
        case 9:
          arr.push(
            {
              label: '住院天数(本期)',
              prop: 'inner_day'
            },
            {
              label: '住院天数(同期)',
              prop: 'inner_day_yoy'
            },
            { slot: 'innerDayIr' }
            // {
            //   label: '住院天数增长率',
            //   prop: 'inner_day_ir'
            // }
          )
          break
        case 10:
          arr.push(
            {
              label: '平均住院日(本期)',
              prop: 'inner_avg_day'
            },
            {
              label: '平均住院日(同期)',
              prop: 'inner_avg_day_yoy'
            },
            { slot: 'innerAvgDayIr' }
            // {
            //   label: '平均住院日增长率',
            //   prop: 'inner_avg_day_ir'
            // }
          )
          break
        case 11:
          arr.push(
            {
              label: '本期',
              prop: 'actual_open_bed_num'
            },
            {
              label: '同期',
              prop: 'actual_open_bed_num_yoy'
            },
            { slot: 'actualOpenBedNumIr' }
            // {
            //   label: '增长率',
            //   prop: 'actual_open_bed_num_ir'
            // }
          )
          break
        case 12:
          arr.push(
            {
              label: '床位周转次数(本期)',
              prop: 'bed_turnover_num'
            },
            {
              label: '床位周转次数(同期)',
              prop: 'bed_turnover_num_yoy'
            },
            { slot: 'bedTurnoverNumIr' }
            // {
            //   label: '床位周转次数增长率',
            //   prop: 'bed_turnover_num_ir'
            // }
          )
          break
        case 13:
          arr.push(
            {
              label: '病床使用率(本期)',
              prop: 'bed_use_rate'
            },
            {
              label: '病床使用率(同期)',
              prop: 'bed_use_rate_yoy'
            },
            { slot: 'bedUseRateIr' }
            // {
            //   label: '病床使用率增长率',
            //   prop: 'bed_use_rate_ir'
            // }
          )
          break
        case 14:
          arr.push(
            {
              label: '手术人次(本期)',
              prop: 'oper_num'
            },
            {
              label: '手术人次(同期)',
              prop: 'oper_num_yoy'
            },
            { slot: 'operNumIr' }
            // {
            //   label: '手术人次增长率1',
            //   prop: 'oper_num_ir'
            // }
          )
          break
        default:
          break
      }
      this.columns = [...arr]
    },
    async getReportData(param) {
      const res = await reportDataByMonth(param)
      if (res.state === '000000') {
        const {
          data: { indexAnalysisChartDataByMonthCd, achievementChartDataByMonthCd, incomeStructureChartDataByMonthCd }
        } = res
        const { mzIncomePieData, zyIncomePieData, incomeRatioData } = incomeStructureChartDataByMonthCd
        this.$nextTick(() => {
          this.incomeRatioData = Object.assign({}, incomeRatioData)
        })
        // 全院指标分析
        this.analyseData = [...indexAnalysisChartDataByMonthCd]

        // 本期同期绩效柱状图
        this.polar2.series.map(v => {
          // 清空，否则多次查询一直push
          v.data = []
        })
        achievementChartDataByMonthCd.map(v => {
          this.polar2.series[0].data.push(v.zsr)
          this.polar2.series[1].data.push(v.achievementValue)
        })

        var dom1 = document.getElementById('bar1')
        var myChart1 = this.echarts.init(dom1, 'light')
        myChart1.setOption(this.polar2)

        this.polar1.series.map(v => {
          v.data = []
        })
        // 门诊饼图
        this.polar3.series[0].data = []
        mzIncomePieData.jyfxIncomeList.map(v => {
          this.polar3.series[0].data.push({
            name: v.incomeName,
            value: v.mzIncomeValue
          })
          this.polar1.series[0].data.push(v.mzIncomeValue)
        })
        var dom2 = document.getElementById('pie1')
        var myChart2 = this.echarts.init(dom2, 'light')
        myChart2.setOption(this.polar3)

        // 住院饼图
        this.polar4.series[0].data = []
        zyIncomePieData.jyfxIncomeList.map(v => {
          this.polar4.series[0].data.push({
            name: v.incomeName,
            value: v.zyIncomeValue
          })
          this.polar1.series[1].data.push(v.zyIncomeValue)
        })
        var dom3 = document.getElementById('pie2')
        this.myChart3 = this.echarts.init(dom3, 'light')
        this.myChart3.setOption(this.polar4)

        // 住院和门诊柱状图
        var dom = document.getElementById('bar')
        var myChart = this.echarts.init(dom, 'light')
        myChart.setOption(this.polar1)
      }
    },
    handleSearch() {
      console.log('form', this.form)
      this.getReportData({ month: this.form.month })
    },
    handleReset() {
      this.$refs.form.resetFields()
    },
    handleTabClick() {
      if (this.activeName !== 'first') {
        this.$nextTick(() => {
          this.myChart3.resize()
        })
      }
    }
  }
}
</script>

<style scoped>
.blue-color {
  color: #56aee9;
}
.mt32 {
  margin-top: 34px;
}
.tl-right {
  text-align: right;
}
.flex-wrap {
  display: flex;
}
.flex-wrap div {
  height: 30px;
}
.flex-wrap .men-zhen {
  background-color: #f9d871;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.flex-wrap .zhu-yuan {
  background-color: #55a1d5;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
</style>
